<template>
  <div>
    <Header></Header>
    <div class="singint">
      <div class="introduce">
        <div class="padd">
          <div>
            <h2 class="name">{{ singerMessage.singer.singerName }}</h2>
            <h3 class="eng_name">{{ singerMessage.singer.singerName }}</h3>
          </div>
          <img src="./images/zhanghuimei.jpg" alt="" />
          <div>
            <el-tabs type="card" stretch class="tab">
              <el-tab-pane label="热门作品">
                <div>
                  <el-button icon="el-icon-video-play" plain size="small">播放</el-button>
                  <el-button icon="el-icon-folder-add" plain size="small">收藏</el-button>
                </div>
                <!-- 歌曲列表 -->
                <div>
                  <el-table size="mini" :data="singerMessage" stripe style="width: 100%">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column width="150">
                      <el-button type="text" icon="el-icon-video-play" circle></el-button>
                      <el-button type="text" icon="el-icon-folder-add" circle></el-button>
                    </el-table-column>
                    <el-table-column prop="song.songName"></el-table-column>
                    <el-table-column prop="song.circulateTime" width="80"> </el-table-column>
                    <el-table-column prop="special" width="148">
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="所有专辑">
                <Ablum :dataList="singerList"></Ablum>
              </el-tab-pane>
              <el-tab-pane label="相关MV">相关MV</el-tab-pane>
              <el-tab-pane label="艺人介绍">
                <h2 class="title">{{ singerMessage.singer.singerName }}简介</h2>
                <p class="introduce">{{ singerMessage.singer.synopsis }}</p>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <!-- 侧边栏 -->
      <div class="right">
        <div class="padd_right">
          <h4 class="h">相似歌手</h4>
          <ul class="right_ul">
            <li class="ul_li" v-for="index in 6" :key="index">
              <img class="ul_li_img" src="./images/zhanghuimei.jpg" alt="" />
              <span class="ul_li_span">林忆莲</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <footer>
      <div class="bottom">
        <div class="divider">
          <span>服务条款</span>
          <el-divider direction="vertical"></el-divider>
          <span>隐私政策</span>
          <el-divider direction="vertical"></el-divider>
          <span>版权投诉</span>
          <el-divider direction="vertical"></el-divider>
          <span>广告合作</span>
          <el-divider direction="vertical"></el-divider>
          <span>联系我们</span>
        </div>

        <p class="foot_p">网易公司版权所有©1997-2022杭州乐读科技有限公司运营:浙网文[2021] 1186-054号</p>
        <p class="foot_p">粤B2-20090191-18 工业和信息化部备案管理系统网站 浙公网安备 33010902002564号</p>
        <p class="foot_p">互联网宗教信息服务许可证：浙（2022）0000120</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Ablum from '@/components/ablum'
export default {
  name: 'singerIntroce',
  components: { Ablum },
  data() {
    return {
      tableData: [
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
        {
          name: "血腥爱情故事",
          time: 3.22,
          special: "阿密特2",
        },
      ],
      singerMessageId: '',
    };
  },
  mounted() {
    //歌手id
    this.singerMessageId = this.$route.params.id
    this.$store.dispatch('getSingerMessage', this.singerMessageId)
    this.$store.dispatch('getAlubum', this.songId)
  },
  computed: {
    ...mapState({
      singerMessage: state => state.singer.singerMessage,
      alubumMessage: state => state.Song.alubumMessage
    })
  }
};
</script>

<style scoped lang="less">
.h2 {
  margin: 28px 0 8px 0;
  color: #333;
  font-size: 14px;
}

.introduce {
  line-height: 25px;
  color: #666;
  text-indent: 2em
}

.singint {
  width: 980px;
  margin: 0 auto;
  border: 1px solid rgb(157, 157, 157);
}

/* 直接给父元素加上伪对象选择符(::after),意思就是在父元素后面添加清除浮动属性。 */
.singint::after {
  content: "";
  display: block;
  clear: both;
}

.introduce {
  float: left;
  width: 709px;
  margin-right: -270px;
}

.padd {
  padding: 30px 20px 30px 39px;
  border-right: 1px solid rgb(157, 157, 157);
}

.name {
  float: left;
  height: 34px;
  line-height: 24px;
  font-weight: normal;
  font-size: 24px;
  color: #333;
}

.eng_name {
  float: left;
  max-width: 23%;
  padding-left: 10px;
  font-size: 14px;
  line-height: 32px;
  color: #999;
  font-weight: normal;
}

.right {
  float: right;
  width: 270px;
  height: 100%;
}

img {
  display: block;
  width: 640px;
  height: 300px;
}

.button {
  height: 39px;
  border: 1px solid #ccc;
  border-width: 0 1px;
  background-position: 0 0;
  background-repeat: repeat-x;
}

.tab {
  width: 640px;
}

.padd_right {
  padding: 20px 40px 40px 30px;
}

.h {
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
}

.ul_li_img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
  object-fit: cover;
}

.right_ul {
  margin-top: 20px;
  margin-left: -10px;
}

.ul_li {
  float: left;
  width: 50px;
  height: 92px;
  margin: 0 10px;
}

.ul_li_span {
  width: 50px;
  vertical-align: middle;
}

.el-table__row {
  height: 20px;
}

footer {
  height: 173px;
  margin-top: -1px;
  border-top: 1px solid #d3d3d3;
  background-color: #f2f2f2;
}

.bottom {
  width: 980px;
  margin: 0 auto;
}

.foot_p {
  margin: 5px 0;
}

.divider {
  margin-top: 5px;
}

/deep/ .el-icon-video-play {
  color: rgb(0, 0, 0)
}

/deep/ .el-icon-folder-add {
  color: rgb(0, 0, 0)
}

/deep/ .el-table--mini .el-table__cell {
  padding: 3px 0 !important;
}
</style>